<template>
  <view>
    <!-- 遮罩 -->
    <view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view>
    <!-- 按钮 -->
    <view class="major-box" :class="{ show: show }">
      <view class="click-btn" v-if="!show" @tap="menuEvent" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
        <view>
          <i class=" iconmain iconfont icon-all p-r-5 f-l"></i>
          {{ menuName }}</view
        >
      </view>
      <view class="nav-box" v-if="show && btnList.length > 0">
        <view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
          <div>
            <i class="iconfont p-r-5" :class="btn.icon"></i>
          </div>
          <view class="nav-text">
            {{ btn.text }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataId: {
      type: String,
      default: '',
    },
    menuName: {
      type: String,
      default: '操作',
    },
    btnList: {
      type: Array,
      default() {
        return [
          {
            text: '返回',
            icon: 'icon-fanhui',
          },
          {
            text: '修改',
            icon: 'icon-setting',
          },
        ]
      },
    },
  },
  data() {
    return {
      show: false, // 是否显示
      deviationTop: 0, // 偏移量
      windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度
    }
  },
  methods: {
    menuEvent() {
      if (this.btnList.length > 0) {
        this.show = !this.show
      } else {
        this.$emit('menuClick')
      }
    },
    // 点击按钮
    clickBtn: function(info) {
      this.show = false
      this.$emit('change', info)
    },
    // 拖动开始，记录一下偏移量
    touchstart: function(e) {
      var touch = e.touches[0] || e.changedTouches[0]
      this.deviationTop = touch.clientY - this.top
      // console.log(this.deviationTop);
    },
    // 上下拖动时
    touchmove: function(e) {
      var touch = e.touches[0] || e.changedTouches[0]
      var top = touch.clientY
      top = top - this.deviationTop
      if (top < 0) {
        top = 0
      }
      if (top > this.windowHeight - 40) {
        top = this.windowHeight - 40
      }
      this.top = top
      return false
    },
  },
}
</script>

<style>
/* 遮罩 */
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(248, 248, 248, 0.8);
}
.iconmain {
  line-height: 1.4;
}
/* 总盒子 */
.major-box {
  border: 1px 0 solid;
  z-index: 100;
  position: fixed;
  bottom: 10%;
  right: 0;
  transition: left 0.5s;
  overflow: hidden;
}

.click-btn,
.nav-box {
  float: left;
}

/* 按钮样式 */
.nav-box {
  background-color: #fff;
  border-radius: 0 0 0 5rpx;
}

.click-btn {
  height: 40rpx;
  background-color: #999;
  color: #fff;
  opacity: 0.8;
  text-align: center;
  border-radius: 50rpx 0 0 50rpx;
  padding: 10rpx 20rpx;
}

.click-btn uni-view {
  line-height: 40rpx;
  font-size: 18rpx;
}

.click-btn view {
  padding-left: 8rpx;
}

/* 按钮盒子 */
.nav-box {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  background-color: #999;
  color: #fff;
  opacity: 0.8;
  text-align: center;
  border-radius: 50rpx 0 0 50rpx;
  padding: 10rpx 20rpx;
}

.nav-btn {
  border: 0px #000 solid;
  min-width: 100rpx;
}

.icon {
  margin: 0 auto;
  width: 20rpx;
  height: 20rpx;
}

.nav-text {
  font-size: 14rpx;
}
</style>
